<template>
  <div>
   <a-card title="会员信息">
      <a-table
      :scroll="{ x: 1500 }"
      :columns="columns"
      :data-source="dataList"
      :rowKey="(record) => record.id"
      :pagination="{
        total: Number(this.total),
        showSizeChanger: true,
        showQuickJumper: true,
        current: Number(this.current),
        pageSize: Number(this.pageSize),
        size: 'small',
        pageSizeOptions: ['5', '10', '25', '50'],
        onChange: handleTableChange,
        onShowSizeChange: handleTableChange,
        showTotal: (total) => `总计 ${total} 条数据`,
      }"
      :loading="loading"
    />
   </a-card>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { getMembers } from "../../services/dataSource";
const isCurrentStr = (val) => {
  if (val != null) {
    return val;
  } else {
    return <span style="color:gray">暂无数据</span>;
  }
};
export default {
  name: "memberList",
  data() {
    return {
      disNo: "",
      total: 0,
      current: 1,
      loading: false,
      pageSize: 10,
      dataList: [],
      selectedRowKeys: [],
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          width: 80,
          align: "center",
          customRender: function (_, __, i) {
            return i + 1;
          },
        },
        {
          title: "会员名称",
          dataIndex: "nickname",
          align: "center",
          width: 150,
          customRender: function (text) {
            if (text != null) {
              return text;
            } else {
              return <span class="noNumber">暂无数据</span>;
            }
          },
        },
        {
          title: "会员手机号",
          dataIndex: "mobile",
          align: "center",
          width: 150,
          customRender: function (text) {
            if (text != null) {
              return text;
            } else {
              return <span class="noNumber">暂无数据</span>;
            }
          },
        },
        {
          title: "会员等级",
          dataIndex: "tProduct",
          align: "center",
          width: 150,
          customRender: function (text) {
            if (record.tProduct == null) {
            return <Tag color="green">普通会员</Tag>;
          } else if (
            record.tProduct !== null &&
            moment(record.endDate).unix() >= moment(new Date()).unix()
          ) {
            return <Tag color="gold">VIP会员</Tag>;
          } else if (
            record.tProduct !== null &&
            moment(record.endDate).unix() < moment(new Date()).unix()
          ) {
            return <Tag color="gray">会员已过期</Tag>;
          }
          },
        },
        {
          title: "会员分布",
          dataIndex: "city",
          align: "center",
          width: 150,
          customRender: function (text) {
            if (text != null) {
              return text;
            } else {
              return <span class="noNumber">暂无数据</span>;
            }
          },
        },
        {
          title: "会员角色",
          dataIndex: "role",
          width: 150,
          align: "center",
          customRender: function (text) {
            if (text != null) {
              return text;
            } else {
              return <span class="noNumber">暂无数据</span>;
            }
          },
        },
        {
          title: "会员宝宝个数",
          dataIndex: "childrenNum",
          align: "center",
          width: 150,
        },
        {
          title: "创建时间",
          dataIndex: "creationTime",
          customRender: function (text) {
            return dayjs(text).format("YYYY-MM-HH hh:mm:ss");
          },
        },
      ],
    };
  },
  methods: {
    //选择
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      //   this.tradeIds = this.selectedRowKeys;
    },
    //切换页面
    handleTableChange(pageNumber, pageSize) {
      this.current = pageNumber;
      this.pageSize = pageSize;
      this.getData();
    },
    //获取会员数据
    getData() {
      getMembers(
        this.disNo,
        (this.current - 1) * this.pageSize,
        this.pageSize
      ).then((res) => {
        this.dataList = res.data.result.items;
        this.total = res.data.result.totalCount;
        this.loading = false;
      });
    },
  },
  created() {
    this.disNo = localStorage.getItem("disbNO");
    this.getData();
  },
};
</script>
<style lang="less">
.noNumber {
  font-size: 12px;
  color: rgb(175, 174, 174);
}
</style>